<template>
    <div class="app-container calendar-list-container">
      <!-- 其他操作 -->
      <section class="filter-container">
        <el-row>
          <el-col :span="4">
            <el-button class="filter-item" type="primary" size="small" @click="upAndownPro(0)">停用</el-button>
            <el-button class="filter-item" type="primary" size="small" @click="upAndownPro(1)">继续使用</el-button>
          </el-col>
          <el-col :span="20">
            <section style="float: right">
              <el-button class="filter-item" type="danger" size="small" @click="delRows">批量删除</el-button>
              <el-button class="filter-item" type="primary" size="small" @click="addButton('add')" style="float: right">添加</el-button>
            </section>
          </el-col>
        </el-row>
      </section>
      <!-- 表格 -->
      <el-table :data="dataList" v-loading="loading" element-loading-text="正在查询中。。。"
       stripe highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column prop="holidaywishes_name" align="center" label="名称" ></el-table-column>
        <el-table-column prop="integraltype_name" align="center" label="已获得(人次)" ></el-table-column>
        <el-table-column prop="create_time" align="center" label="发布时间" ></el-table-column>
        <el-table-column prop="close_status" align="center" label="状态" >
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.close_status==1?'success':'danger'">{{ t_status[scope.row.close_status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column  label="操作" align="center" width="100">
          <template slot-scope="scope">
            <i class="iconfont ali-edit-2" @click="addButton('edit',scope.row)"></i>
            &nbsp;
            <i class="iconfont ali-bin" @click="delRow(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <section>
        <so-pagination :query="listQuery" @initList="initList"/>
      </section>
      <!-- 新建/编辑 -->
      <section>
        <createTemp ref="tempForm" :isShow="isShow" @closeTemp="closeTemp" @initList="initList"></createTemp>
      </section>
    </div>
</template>

<script>
import { holidaywishes_list, holidaywishes_updateCloseStatus, holidaywishes_save, holidaywishes_edit, holidaywishes_delete, holidaywishes_deleteAll } from "@/api/holidaywishes";
import SoPagination from '@/components/SoPagination'
import createTemp from './components/createTemp'

export default {
  name: "welfare",
  components: { SoPagination,createTemp },
  data() {
    return {
      loading: false,
      dataList: [],
      currentPage: 1,
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
      isShow: false,
      status:"",   //判断是新增还是编辑
      t_status: ['已停用','使用中'],
      multipleSelection:[]
    };
  },
  methods: {
    async addButton(e,scopeRow){  //创建或编辑福利
      if(e == 'add'){  //创建
        await this.$store.dispatch("SetWelfareDecide", 'add')
      }else if(e == 'edit'){  //编辑
        await this.$store.dispatch("SetWelfareDecide", 'edit')
        await this.$store.dispatch('SetEditId',scopeRow.id);
        await this.$refs.tempForm.initList();
      }
      this.isShow = true;
    },
    async closeTemp(){  //此处为了触发 watch 钩子
      this.isShow = false
    },
    handleSelectionChange(e) {
      this.multipleSelection = e;
    },
    async upAndownPro(e){  //1 继续使用 0停用
      if(!this.multipleSelection.length){
        this.$message.warning('请先选择需要调整单元');
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      this.loading = true;
      let { data } = await holidaywishes_updateCloseStatus({ids: ids, close_status: e});
      this.loading = false;
      if(data.status == 100){
        await this.initList();
        this.$message.success(`${this.t_status[e]}成功`);
      }
    },
    
    async delRows(){   //批量删除
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择需要调整单元");
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      try {
        const res = await this.$confirm("确认删除吗？");
        if (res == "confirm") {
          this.loading = true;
          const { data } = await holidaywishes_deleteAll({array: ids});
          if (data.status == 100) {
            this.$message.success("删除成功");
          }
          this.initList();
        }
      } catch (error) {
        console.log(error, "error");
      }
    },
    async delRow(row) {   //删除
      try {
        let res = await this.$confirm('确认删除吗？')
        if (res == 'confirm') {
          this.loading = true;
          let { data } = await holidaywishes_delete(row);
          this.loading = false;
          if (data.status == 100) {
            this.$message.success('删除成功')
            this.initList();
          }
        }
      } catch (error) {
        console.log(error, 'error')
      }
    },
    async initList() {  //获取数据
      this.loading = true;
      const query = {...this.listQuery, company_id: localStorage.getItem("companyId") - 0}
      const { data } = await holidaywishes_list(query);
      this.loading = false;
      if (data.status == 100) {
        this.dataList = data.data.rows;
        this.listQuery.total = data.data.results;
      }
    }
  },
  created() {
    this.initList();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  background-color: #fff;
  padding: 20px;
}
.container-right {
  text-align: right;
}
.container-table {
  padding: 20px 0;
}
.ali-edit-2 {
    cursor: pointer;
    color: #e6a23d;
}
.ali-bin {
  cursor: pointer;
  color: #f56c6c;
}
</style>
